{% macro render_test(item) %}

    <div class="timeline-item timeline-item-arrow-sm">
        <div class="timeline-point timeline-point-primary">
            <i class="fa fa-star"></i>
        </div>
        <div class="timeline-event timeline-event-primary">
            <table class="table table-striped table-hover">

                <p>{{ item }}</p>

            </table>

        </div>
    </div>


{% endmacro %}

{% macro render_obj(dt) %}
    {% if dt.__class__.__name__ == 'dict' %}
        <table class="table">
            {% for k in dt %}
                {% set v=dt[k] %}
                <tr>
                    <td>{{ k }}</td>
                    <td>
                        {{ render_obj(v) }}
                    </td>
                </tr>
            {% endfor %}
        </table>
    {% elif dt.__class__.__name__ == 'list' %}
        <table class="table">
            {% for v in dt %}

                <tr>
                    <td>
                        <div class="row"><span style="margin: 10px" class="badge">{{ loop.index }}</span></div>
                        <div class="row"> {{ render_obj(v) }} </div>
                    </td>
                </tr>

            {% endfor %}
        </table>
    {% else %}
        {{ dt|string }}
    {% endif %}
{% endmacro %}

{% macro render_setattr(obj) %}

    {% with %}
        {% set  keys=obj['keys'] %}
        {% set  values=obj['values'] %}

        <div class="timeline-item">
            <div class="timeline-point timeline-point-success">
                <i class="fa fa-cogs"></i>
            </div>
            <div class="timeline-event timeline-event-success">
                <div class="timeline-heading">
                    <div class="row">
                        <div class="col-md-6"><h4>{{ obj['name'] }} </h4></div>
                        <div class="col-md-6"><p class="text-right">{{ obj['begin'] }}</p></div>
                    </div>
                </div>
                <div class="timeline-body">

                    <p>old_data: {{ obj['old_data'] }}</p>
                    <table class="table">
                        {% for k in obj['data'] %}
                            <tr>
                                <td>{{ k }}</td>
                                <td>set</td>
                                <td>{{ obj['data'][k][0] }}</td>
                                <td>=</td>
                                <td>{{ obj['data'][k][1] }}</td>
                            </tr>
                        {% endfor %}
                    </table>
                    <p>new_data: {{ obj['new_data'] }}</p>
                </div>
                <div class="timeline-footer">
                    <p class="text-right">{{ obj['end'] }}</p>
                </div>
            </div>
        </div>

    {% endwith %}

{% endmacro %}



{% macro render_function(obj) %}

    {% with %}
        <div class="timeline-item">
            <div class="timeline-point timeline-point-info">
                <i class="fa fa-cogs"></i>
            </div>
            <div class="timeline-event timeline-event-info">
                <div class="timeline-heading">
                    <div class="row">
                        <div class="col-md-6"><h4>{{ obj['name'] }} </h4></div>
                        <div class="col-md-6"><p class="text-right">{{ obj['begin'] }}</p></div>
                    </div>
                </div>
                <div class="timeline-body">
                    <p>args: {{ render_obj(obj['args']) }}</p>
                    <p>kwargs: {{ render_obj(obj['kwargs']) }}</p>
                    <p>return: {{ render_obj(obj['return']) }}</p>
                </div>
                <div class="timeline-footer">
                    <p class="text-right">{{ obj['end'] }}</p>
                </div>
            </div>
        </div>

    {% endwith %}

{% endmacro %}

{% macro render_item(item) %}
    {% if item['type'] == 'SetattrItem' %}
        {{ render_setattr(item) }}
    {% elif item['type'] == 'FunctionItem' %}
        {{ render_function(item) }}
    {% elif item['type'] == 'LogItem' %}
        <div class="timeline-item timeline-item-arrow-sm">
            <div class="timeline-point">
                <i class="fa fa-star"></i>
            </div>
            <div class="timeline-event">
                <div class="timeline-heading">
                    <div class="row">
                        <div class="col-md-6"><h4>{{ item['name'] }} </h4></div>
                        <div class="col-md-6"><p class="text-right">begin {{ item['begin'] }}</p></div>
                    </div>
                </div>
                <div class="timeline-body">
                    <table class="table table-striped table-hover">

                        {% for index in range(item['keys']|length) %}
                            {% set key=item['keys'][index] %}
                            {% set value = item['values'][index] %}
                            {% if value.__class__.__name__ =='dict' %}
                                {% if 'type' in value %}
                                    <tr>
                                        <td colspan="2">{{ render_item(value) }}</td>
                                    </tr>
                                {% else %}
                                    <tr>
                                        <td>{{ key }}</td>
                                        <td>
                                            {{ render_obj(value) }}
                                        </td>
                                    </tr>

                                {% endif %}
                            {% else %}
                                <tr>
                                    <td>{{ key }}</td>
                                    <td>{{ render_obj(value) }}</td>
                                </tr>
                            {% endif %}
                        {% endfor %}

                    </table>
                </div>
                <div class="timeline-footer">
                    <p class="text-right">end {{ item['end'] }}</p>
                </div>


            </div>
        </div>
    {% endif %}

{% endmacro %}


{% macro render_collect(dt) %}
    {% if dt.__class__.__name__ == 'dict' %}
        {% if dt %}
            <table class="table">
                {% for k in dt %}
                    {% set v=dt[k] %}
                    <tr>
                        <td>{{ k }}</td>
                        <td>
                            {{ render_collect(v) }}
                        </td>
                    </tr>
                {% endfor %}
            </table>
        {% else %}
            {{ '{}' }}
        {% endif %}
    {% elif dt.__class__.__name__ == 'list' %}
        {% if dt %}
            <table class="table" style="word-break:break-all; word-wrap:normal;">
                {% for v in dt %}

                    <tr>

                        <td style="min-width: 10px"><span class="badge">{{ loop.index }}</span></td>
                        <td style="min-width: 80px"> {{ render_collect(v) }}   </td>
                    </tr>

                {% endfor %}
            </table>
        {% else %}
            {{ '[]' }}
        {% endif %}
    {% else %}
        <span>{{ dt|string }}</span>
    {% endif %}
{% endmacro %}


{% macro render_x(item,id=1) %}
    <div class="panel panel-default
    {% if item['type'] == 'LogItem' %}panel-primary{% endif %}
    {% if item['type'] == 'SetattrItem' %}panel-warning{% endif %}
     {% if item['type'] == 'FunctionItem' %}panel-info{% endif %}
     {% if item['type'] == 'ExceptionItem' %}panel-danger{% endif %}
     ExceptionItem
">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse"
                   href="#collapse{{ id }}">
                     {% if item['type'] == 'LogItem' %} <i class="fa fa-star"></i>{% endif %}
                    {% if item['type'] == 'SetattrItem' %} <i class="fa fa-wrench"></i>{% endif %}
                    {% if item['type'] == 'FunctionItem' %} <i class="fa fa-tags"></i>{% endif %}
                  {% if item['type'] == 'ExceptionItem' %} <i class="fa fa-warning"></i>{% endif %}
                    {{ item['name'] }} <span style="font-size: x-small;float:right">  {{ item['begin'] }}</span>

                </a>
            </h4>
        </div>
        <div id="collapse{{ id }}" class="panel-collapse collapse in">
            <div class="panel-body">
                <table class="table" style="word-break:break-all; word-wrap:normal;">

                    {% for pair in item['data'] %}

                        {% with %}
                            {% set key=pair[0] %}
                            {% set value=pair[1] %}
                            {% if value.__class__.__name__ =='dict' %}
                                {% if 'type' in value %}
                                    <tr>
                                        <td colspan="2">  {{ render_x(value,10*id+ loop.index) }}</td>
                                    </tr>
                                {% else %}
                                    <tr>
                                        <td colspan="2" style="min-width: 80px">{{ key }}</td>
                                    </tr>
                                    <tr>
                                        <td colspan="2" style="min-width: 80px">
                                            {{ render_collect(value) }}
                                        </td>
                                    </tr>

                                {% endif %}
                            {% else %}

                                <tr>
                                    <td style="min-width: 80px">{{ key }}</td>
                                    <td style="min-width: 80px">
                                        {{ render_collect(value) }}
                                    </td>
                                </tr>
                            {% endif %}

                        {% endwith %}

                    {% endfor %}
                </table>
                <p><span style="font-size: x-small;float:right">  {{ item['end'] }}</span></p>
            </div>

        </div>

    </div>


    {#    </div>#}

{% endmacro %}


